<template>
  <view>
    
    <view class="comment-limit-container" v-if="!isShowMore">
      <view class="comment-view">查看精简评论</view>
      <block v-for="(item, index) in commentsData.slice(0, 2)" :key="index">
        <article-comment-item :data="item.info"></article-comment-item>
      </block>
      <!-- 查看更多 -->
      <view class="showmore" @click="onClickShowmre" v-if="!isShowMore">查看更多评论</view>
    </view>
    <view class="comment-limit-container" v-else>
      <view class="comment-view">查看全部评论</view>
      <mescroll-body ref="mescrollRef" @init="onMeScrollInit" @up="onUp" :up="{textNoMore:'---我是底线---'}" :down="{use:false}">
      <block v-for="(item, index) in commentsData" :key="index">
        <article-comment-item :data="item.info"></article-comment-item>
      </block>
    </mescroll-body>
    </view>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { getArticleCommentListAPI } from "../../apis/article";
import MescrollBody from '../../uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue';
import articleCommentItem from "../article-comment-item/article-comment-item.vue";
export default {
  components: { articleCommentItem, MescrollBody },
  mixins:[MescrollMixin],
  name: "article-comment-list",
  props: {
    articleId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      page: 1,
      size: 5,
      commentsData: [],
      isShowMore:false,
      isInit:true,
      mescroll:null,
      commentsCount:0
    };
  },
  created() {
    this.getArticleCommentListData();
  },
  methods: {
    async getArticleCommentListData() {
      const { data: res } = await getArticleCommentListAPI({
        articleId: this.articleId,
        page: this.page,
        size: this.size,
      });
      // console.log(res);
      this.commentsCount=res.count
      this.commentsData = [...this.commentsData,...res.list];
    },
    onClickShowmre(){
      this.isShowMore = true
    },
    async onMeScrollInit(){
      this.isInit = false
      await this.getArticleCommentListData()
      this.getMescroll().endSuccess()
      this.getMescroll().endBySize(this.commentsData.length,this.commentsCount)
    },
    async onUp(){
      if(this.isInit){return}
      this.page++
      await this.getArticleCommentListData()
      this.getMescroll().endSuccess()
      this.getMescroll().endBySize(this.commentsData.length,this.commentsCount)
    },
    getMescroll(){
      this.mescroll = this.$refs.mescrollRef.mescroll                      
      return this.mescroll
    },
    addComment(data){
      this.commentsData.unshift(data)
    }

  },
};
</script>

<style lang="scss" scoped>
.comment-view {
    font-weight: 500;
    color: grey;
    font-size: 14px;
    margin: 10px 0px;
  }
.comment-limit-container {
  .showmore {
    margin: 12px;
    text-align: center;
    color: #5d83a8;
    font-size: 14px;
  }
  // .showmore{
  //   // position: relative;
  //   box-sizing: border-box;
  //   width: 100%;
  //   height: 14px;
  //   margin: 12px;
  //   text{
  //     // display: inline-block;
  //     box-sizing: border-box;
  //     width: 100px;
  //     // padding: auto;
  //     height: 14px;
  //     background-color: #fff;
  //     color: #5d83a8;
  //     font-size: 12px;
  //     text-align: center;
  //   }

  //   // &::before{
  //   //   content: ' ';
  //   //   position: absolute;
  //   //   top: 0;
  //   //   left: 0;
  //   //   transform: translate();
  //   //   width: 100%;
  //   //   // height: 14px;
  //   //   border-bottom: 2px solid grey;
  //   // }

  // }
}
</style>
